<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>M3U8 Video Detector - 帮助文档</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #f5f5f5;
      line-height: 1.6;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    header {
      background-color: #4285f4;
      color: white;
      padding: 20px 0;
      text-align: center;
      margin-bottom: 30px;
    }
    
    header h1 {
      margin: 0;
      font-size: 28px;
    }
    
    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 20px;
      margin-bottom: 20px;
    }
    
    h2 {
      color: #4285f4;
      border-bottom: 1px solid #e0e0e0;
      padding-bottom: 10px;
      margin-top: 0;
    }
    
    h3 {
      color: #5f6368;
      margin-top: 20px;
      margin-bottom: 10px;
    }
    
    p {
      margin: 15px 0;
    }
    
    ul, ol {
      padding-left: 20px;
    }
    
    li {
      margin-bottom: 8px;
    }
    
    .feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 20px;
    }
    
    .feature-item {
      flex: 1 1 calc(50% - 20px);
      min-width: 250px;
      background-color: #f8f9fa;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }
    
    .feature-item h4 {
      margin-top: 0;
      color: #4285f4;
    }
    
    .note {
      background-color: #e8f0fe;
      border-left: 4px solid #4285f4;
      padding: 10px 15px;
      margin: 20px 0;
    }
    
    .warning {
      background-color: #fef7e0;
      border-left: 4px solid #fbbc04;
      padding: 10px 15px;
      margin: 20px 0;
    }
    
    code {
      font-family: monospace;
      background-color: #f1f3f4;
      padding: 2px 4px;
      border-radius: 4px;
    }
    
    .screenshot {
      max-width: 100%;
      height: auto;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin: 15px 0;
    }
    
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    
    th, td {
      border: 1px solid #ddd;
      padding: 8px 12px;
      text-align: left;
    }
    
    th {
      background-color: #f1f3f4;
    }
    
    tr:nth-child(even) {
      background-color: #f8f9fa;
    }
    
    footer {
      text-align: center;
      padding: 20px;
      color: #666;
      font-size: 14px;
      margin-top: 40px;
    }
    
    a {
      color: #4285f4;
      text-decoration: none;
    }
    
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <header>
    <div class="container">
      <h1>M3U8 Video Detector - 帮助文档</h1>
    </div>
  </header>
  
  <div class="container">
    <div class="card">
      <h2>什么是M3U8 Video Detector？</h2>
      <p>M3U8 Video Detector是一个浏览器扩展程序，可以自动检测网页中的M3U8视频链接，并提供便捷的播放和下载选项。无论您是在观看在线视频、学习教程还是进行研究，这个工具都能帮助您轻松获取和管理M3U8视频资源。</p>
      
      <div class="feature-list">
        <div class="feature-item">
          <h4>自动检测</h4>
          <p>浏览网页时自动检测M3U8链接，无需手动操作</p>
        </div>
        <div class="feature-item">
          <h4>便捷管理</h4>
          <p>集中管理所有检测到的链接，方便查找和使用</p>
        </div>
        <div class="feature-item">
          <h4>一键播放</h4>
          <p>使用内置或自定义播放器快速播放视频</p>
        </div>
        <div class="feature-item">
          <h4>轻松下载</h4>
          <p>支持多种下载工具，保存视频到本地</p>
        </div>
      </div>
    </div>
    
    <div class="card">
      <h2>什么是M3U8？</h2>
      <p>M3U8是一种文本文件格式，用于指定媒体播放列表。它是M3U格式的UTF-8编码版本，常用于流媒体服务，特别是HTTP Live Streaming (HLS)技术。</p>
      
      <p>M3U8文件包含指向媒体片段的URL列表，这些片段通常是短视频片段（.ts文件），播放器会按顺序加载和播放这些片段，从而实现流畅的视频播放体验。</p>
      
      <div class="note">
        <p><strong>技术说明：</strong> HLS (HTTP Live Streaming) 是由Apple开发的一种基于HTTP的自适应比特率流媒体传输协议。它将整个视频分割成小片段，并使用M3U8文件作为索引，使播放器能够根据网络条件自动调整视频质量。</p>
      </div>
    </div>
    
    <div class="card">
      <h2>使用指南</h2>
      
      <h3>基本使用</h3>
      <ol>
        <li><strong>安装扩展：</strong> 从Chrome网上应用店安装M3U8 Video Detector扩展。</li>
        <li><strong>浏览网页：</strong> 正常浏览您喜欢的网站，扩展会在后台自动检测M3U8链接。</li>
        <li><strong>查看链接：</strong> 当检测到M3U8链接时，扩展图标上会显示数字提示。点击图标打开弹出窗口，查看所有检测到的链接。</li>
        <li><strong>使用链接：</strong> 在弹出窗口中，您可以复制链接、播放视频或下载视频。</li>
      </ol>
      
      <h3>链接管理</h3>
      <ul>
        <li><strong>复制链接：</strong> 点击链接旁边的复制图标，将链接复制到剪贴板。</li>
        <li><strong>播放视频：</strong> 点击播放图标，使用配置的播放器打开视频。</li>
        <li><strong>下载视频：</strong> 点击下载图标，使用配置的下载工具保存视频。</li>
        <li><strong>删除链接：</strong> 点击删除图标，从列表中移除链接。</li>
        <li><strong>清除所有：</strong> 点击"清除所有链接"按钮，删除所有保存的链接。</li>
      </ul>
      
      <h3>通知功能</h3>
      <p>当检测到新的M3U8链接时，扩展会显示桌面通知（如果已启用）。通知包含两个按钮：</p>
      <ul>
        <li><strong>播放：</strong> 立即使用配置的播放器打开视频。</li>
        <li><strong>下载：</strong> 立即使用配置的下载工具保存视频。</li>
      </ul>
    </div>
    
    <div class="card">
      <h2>设置选项</h2>
      
      <h3>通知设置</h3>
      <ul>
        <li><strong>启用桌面通知：</strong> 控制是否在检测到新链接时显示通知。</li>
        <li><strong>通知显示时间：</strong> 设置通知自动关闭的时间（毫秒）。设置为0表示不自动关闭。</li>
      </ul>
      
      <h3>播放器设置</h3>
      <ul>
        <li><strong>默认播放器：</strong> 选择内置的在线M3U8播放器。</li>
        <li><strong>自定义播放器：</strong> 设置您自己的M3U8播放器URL，使用{url}作为链接占位符。</li>
      </ul>
      
      <h3>下载器设置</h3>
      <ul>
        <li><strong>默认下载器：</strong> 选择内置的在线M3U8下载工具。</li>
        <li><strong>自定义下载器：</strong> 设置您自己的M3U8下载工具URL，使用{url}作为链接占位符。</li>
        <li><strong>自动打开下载器：</strong> 检测到链接时自动打开下载页面。</li>
      </ul>
      
      <h3>过滤规则</h3>
      <ul>
        <li><strong>启用URL过滤：</strong> 根据规则过滤检测到的M3U8链接。</li>
        <li><strong>过滤规则：</strong> 使用JavaScript正则表达式格式设置规则，每行一个。以!开头表示排除规则。</li>
      </ul>
      
      <div class="note">
        <p><strong>过滤规则示例：</strong></p>
        <ul></ul>
          <li><code>.*\.example\.com/.*</code> - 包含example.com域名的链接</li>
          <li><code>!.*\.ads\.com/.*</code> - 排除ads.com域名的链接</li>
        </ul>
      </div>
      
      <h3>存储设置</h3>
      <ul></ul>
        <li><strong>自动清理旧链接：</strong> 启用自动清理功能。</li>
        <li><strong>最大保存链接数量：</strong> 设置最多保存的链接数量。设置为0表示不限制数量。</li>
        <li><strong>自动清理天数：</strong> 超过指定天数的链接将被自动清理。</li>
      </ul>
      
      <h3>导入/导出设置</h3>
      <ul>
        <li><strong>导出设置：</strong> 将当前设置导出为JSON文件。</li>
        <li><strong>导入设置：</strong> 从JSON文件导入设置。</li>
      </ul>
    </div>
    
    <div class="card">
      <h2>常见问题</h2>
      
      <h3>为什么扩展没有检测到某些网站的M3U8链接？</h3>
      <p>有些网站使用特殊的加密或混淆技术来隐藏视频链接，或者使用非标准的方式加载视频。在这些情况下，扩展可能无法自动检测到链接。</p>
      
      <h3>如何提高检测成功率？</h3>
      <p>尝试以下方法：</p>
      <ul>
        <li>确保在视频开始播放后再查看检测结果</li>
        <li>尝试刷新页面或重新加载视频</li>
        <li>检查浏览器控制台是否有错误信息</li>
      </ul>
      
      <h3>为什么有些M3U8链接无法播放？</h3>
      <p>可能的原因：</p>
      <ul>
        <li>链接已过期（许多网站的M3U8链接有时效性）</li>
        <li>链接需要特定的请求头（如Referer或User-Agent）</li>
        <li>链接使用了加密或DRM保护</li>
        <li>链接需要身份验证或Cookie</li>
      </ul>
      
      <h3>如何使用本地播放器（如VLC）播放M3U8链接？</h3>
      <p>您可以在设置中配置自定义播放器URL，使用特殊的URL协议（如vlc://）来启动本地应用程序。具体配置方法取决于您的操作系统和播放器。</p>
      
      <div class="warning">
        <p><strong>注意：</strong> 由于浏览器安全限制，直接从扩展启动本地应用程序可能需要额外的配置或辅助软件。</p>
      </div>
    </div>
    
    <div class="card">
      <h2>隐私说明</h2>
      <p>M3U8 Video Detector尊重您的隐私：</p>
      <ul>
        <li>所有数据仅存储在您的浏览器本地，不会上传到任何服务器</li>
        <li>扩展不会收集任何个人信息或浏览历史</li>
        <li>扩展不包含任何跟踪或分析代码</li>
        <li>所有操作都在您的设备上本地执行</li>
      </ul>
      
      <div class="note">
        <p><strong>权限说明：</strong> 扩展请求的权限（如存储、通知和标签页访问）仅用于实现核心功能，不会用于其他目的。</p>
      </div>
    </div>
    
    <div class="card">
      <h2>技术支持</h2>
      <p>如果您在使用过程中遇到问题或有任何建议，请通过以下方式联系我们：</p>
      <ul>
        <li>电子邮件：support@m3u8detector.example.com</li>
        <li>GitHub问题：<a href="https://github.com/example/m3u8-detector/issues" target="_blank">提交问题</a></li>
        <li>Chrome网上应用店：在扩展页面留下评论</li>
      </ul>
      
      <p>在报告问题时，请尽可能提供以下信息：</p>
      <ul>
        <li>浏览器版本和操作系统</li>
        <li>扩展版本</li>
        <li>问题的详细描述</li>
        <li>重现问题的步骤</li>
        <li>相关的错误信息（如果有）</li>
      </ul>
    </div>
    
    <div class="card">
      <h2>法律声明</h2>
      <p>M3U8 Video Detector是一个工具，旨在帮助用户访问和管理公开可用的M3U8视频链接。用户应负责确保其使用方式符合相关法律法规和网站的服务条款。</p>
      
      <div class="warning">
        <p><strong>免责声明：</strong> 本扩展仅提供技术功能，不鼓励或支持任何侵犯版权或违反服务条款的行为。用户应自行承担使用本扩展的法律责任。</p>
      </div>
      
      <p>本扩展不提供任何视频内容，也不托管任何媒体文件。它只是检测和管理用户在正常浏览过程中遇到的M3U8链接。</p>
    </div>
  </div>
  
  <footer>
    <p>M3U8 Video Detector &copy; 2023 | <a href="options.html">设置</a> | <a href="https://github.com/example/m3u8-detector" target="_blank">GitHub</a></p>
  </footer>